<template>
    <div class="main-content1">
        <n-tabs type="segment" animated>
            <n-tab-pane name="chap1" tab="压缩">
                <n-loading-bar-provider>
                    <control-bar>
                        <n-upload
                            ref="uploadRef"
                            action="#"
                            accept=".jpg,.png,.bmp,.tif,.zip"
                            :show-file-list="false"
                            :custom-request="customRequest">
                            <n-button>上传文件</n-button>
                        </n-upload>
                    </control-bar>
                    <tableContent
                        ref="tableContentRef"
                        :columns="compressColumns"
                        :type="'compress'"></tableContent>
                </n-loading-bar-provider>
            </n-tab-pane>
            <n-tab-pane name="chap2" tab="解压缩">
                <control-bar>
                    <n-upload
                        ref="uploadRef1"
                        action="#"
                        accept=".csc,.zip"
                        :show-file-list="false"
                        :custom-request="customRequest1">
                        <n-button>上传文件</n-button>
                    </n-upload>
                </control-bar>
                <tableContent
                    ref="tableContentRef"
                    :columns="uncompressColumns"
                    :type="'uncompress'"></tableContent>
            </n-tab-pane>
        </n-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import ControlBar from '@/components/common/ControlBar.vue'
import MainContent from '@/components/common/MainContent.vue'
import tableContent from './tableContent.vue'
import { compress, decompress } from '@/api/modules/compression.js'
import type { UploadCustomRequestOptions } from 'naive-ui'
import { useLoadingBar } from 'naive-ui'
const loadingBar = useLoadingBar()
const activeTab = ref('chap1')
const uncompressColumns = ref([
    {
        label: '原数据路径',
        prop: 'sourceFile',
    },
    {
        label: '解压数据路径',
        prop: 'deskFile',
    },
    {
        label: '压缩耗时',
        prop: 'decompressionTime',
    },
    {
        label: '原数据大小',
        prop: 'sourceSize',
    },
    {
        label: '解压缩数据大小',
        prop: 'deskSize',
    },
])
const compressColumns = ref([
    {
        label: '原数据路径',
        prop: 'sourceFile',
    },
    {
        label: '压缩数据路径',
        prop: 'deskFile',
    },
    {
        label: '压缩耗时',
        prop: 'compressionTime',
    },
    {
        label: '压缩比',
        prop: 'compressionRatio',
    },
    {
        label: '图像质量',
        prop: 'imageQuality',
    },
    {
        label: '原数据大小',
        prop: 'sourceSize',
    },
    {
        label: '压缩数据大小',
        prop: 'deskSize',
    },
    // {
    //     label: '失真度',
    //     prop: 'distortDegree',
    // },
    // {
    //     label: 'JPG2000 技术压缩比对比值',
    //     prop: 'oddsRatio',
    //     width: 220,
    // },
    // {
    //     label: '压缩失败原因',
    //     prop: 'failReason',
    // },
])
const compressData = ref([])
const tableContentRef = ref()
const uploadRef = ref()
const uploadRef1 = ref()
// 压缩文件上传
const customRequest = ({ file }: UploadCustomRequestOptions) => {
    loadingBar.start()
    const formData = new FormData()
    formData.append('image', file.file as File)
    compress(formData).then((res: Response) => {
        tableContentRef.value.getCompressData()
        uploadRef.value.clear()
        setTimeout(() => {
            loadingBar.finish()
        }, 1000)
    })
}
// 解压缩文件上传
const customRequest1 = ({ file }: UploadCustomRequestOptions) => {
    const formData = new FormData()
    formData.append('csc', file.file as File)
    decompress(formData).then((res: Response) => {
        tableContentRef.value.getDeCompressData()
        uploadRef1.value.clear()
    })
}

onMounted(() => {})
</script>
<style lang="scss" scoped>
::v-deep.main-content1 {
    height: 100vh;
    .n-tabs {
        height: 100%;
        .n-tabs-pane-wrapper {
            height: calc(100% - 40px);
            .n-tab-pane {
                height: 100%;
            }
        }
    }
}
</style>
